<template>
  <view class="orderBox">
    <view
      class="order"
      v-for="item of items"
      :key="item.id"
      @click="handle('detail', item)"
    >
      <view class="orderItem">
        <view class="img"
          ><image :src="item.pic" mode="aspectFill"></image
        ></view>

        <view class="orderTxt">
          <view class="title">{{ item.goods_name }}</view>

          <view class="attr" v-if="order">
            <view class="tagItem" v-if="order.order_type === 1">
              {{ getAttrName(item.attr) }}
            </view>
            <view class="tagItem" v-if="order.order_type === 2">
              {{ item.attr.date }} {{ item.attr.time }}
            </view>
            <view class="num">x{{ item.num }}</view>
          </view>

          <view class="price">
            <view class="em before">¥</view>
            <view class="con">{{ getPrect(item.total_price)[0] }}</view>
            <view class="em after">.{{ getPrect(item.total_price)[1] }}</view>
          </view>
        </view>
      </view>
      
      <toolsForm :form="item.order_form" :disabled="true"></toolsForm>
    </view>
  </view>
</template>

<script>
import toolsForm from "./tools-form.vue";

export default {
    components: {
      toolsForm,
  },
  props: {
    items: {
      type: Array,
      default() {
        return [];
      },
    },

    order: {
      type: Object,
      default() {
        return null;
      },
    },
  },

  computed: {
    getPrect() {
      return (price) => {
        let newPrice = String(price).split(".");

        return newPrice;
      };
    },

    getAttrName() {
      return (attr) => {
        if (attr && attr.length) {
          return attr
            .map((el) => el.attr_group_name + ":" + el.attr_name)
            .join();
        }

        return "";
      };
    },
  },

  data() {
    return {};
  },

  methods: {
    handle(type, item) {
      switch (type) {
        case "detail":
          // uni.navigateTo({
          //   url: `/admin/order/item/index?id=${item.id}`,
          // });
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.order {
  /* padding: 30rpx 24rpx; */
  background: #fff;
  border-bottom: 1px solid #f8f8f8;

  &:last-of-type {
    border-bottom: 0;
  }
}

.orderItem {
  display: flex;
  margin-top: 30rpx;

  .img {
    width: 180rpx;
    height: 180rpx;

    image {
      width: 100%;
      height: 100%;
      background: #f6f6f6;
      border-radius: 10rpx;
    }
  }
}

.orderTxt {
  flex: 1;
  overflow: hidden;
  margin-left: 24rpx;

  .attr {
    display: flex;
    padding: 10rpx 0;
    font-size: 22rpx;

    .num {
      color: #8c8c8c;
    }

    .tagItem {
      margin-right: 10rpx;
      flex: 1;
      overflow: hidden;
    }
  }

  .title {
    font-size: 28rpx;
    color: #262626;
    line-height: 40rpx;
    max-height: 80rpx;
    overflow: hidden;
    display: -webkit-box;
    white-space: normal;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }

  .tag {
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 5rpx 0 20rpx;
  }

  .tagItem {
    margin-right: 20px;
    font-size: 24rpx;
    color: #8c8c8c;
  }

  .price {
    display: flex;
    align-items: flex-end;
    color: #262626;
    font-size: 40rpx;
    line-height: 1;

    .con {
      position: relative;
      top: 4rpx;
    }

    .em {
      font-size: 24rpx;
    }
  }
}
</style>
